﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="binary, decimal, formatted input, Help Documentation, hexadecimal, input, jQuery, jQWidgets, jqxFormattedInput, numeral, numeral system, octal, radix" />
    <meta name="description" content="This page represents the help documentation of the jqxFormattedInput widget." />
    <title>jqxFormattedInput API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the jqxFormattedInput.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>disabled</code> property.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput({ disabled: false });</code></pre>
                        <p>
                            Get the <code>disabled</code> property.
                        </p>
                        <pre><code>var disabled = $('#jqxFormattedInput').jqxFormattedInput('disabled');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/d46muerj/">disabled
                                is set to true</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxFormattedInput's width.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>width</code> property.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput({ width: 200 });</code></pre>
                        <p>
                            Get the <code>width</code> property.
                        </p>
                        <pre><code>var width = $('#jqxFormattedInput').jqxFormattedInput('width');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ch9xx2ny/">width
                                is set to 200</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxFormattedInput's height.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>height</code> property.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput({ height: "35px" });</code></pre>
                        <p>
                            Get the <code>height</code> property.
                        </p>
                        <pre><code>var height = $('#jqxFormattedInput').jqxFormattedInput('height');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kbfxk1ve/">height
                                is set to 35</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span51'>rtl</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets a value indicating whether widget's elements are aligned to support
                            locales using right-to-left fonts.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Set the <code>rtl</code> property.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput({ rtl : true });</code></pre>
                        <p>
                            Get the <code>rtl</code> property.
                        </p>
                        <pre><code>var rtl = $('#jqxFormattedInput').jqxFormattedInput('rtl');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/26xzzL5j/">rtl
                                is set to true</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>theme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the widget's theme.</p>
                        jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The
                        base stylesheet creates the styles related to the widget's layout like margin, padding,
                        border-width, position. The second css file applies the widget's colors and backgrounds.
                        The jqx.base.css should be included before the second CSS file. In order to set
                        a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />
                                The following code example adds the 'energyblue' theme.
                                <pre><code>
                                    <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt; </code></pre>
                                </code></pre>
                            </li>
                            <li>Set the widget's theme property to 'energyblue' when you initialize it.</li>
                        </ul>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ch9xx2ny/">theme
                                is set to 'energyblue'</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>placeHolder</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the jqxFormattedInput's placeholder.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Set the <code>placeHolder</code> property.
                        </p>
                        <pre><code>$("#jqxFormattedInput").jqxFormattedInput({ placeHolder: "Enter a number" });</code></pre>
                        <p>
                            Get the <code>placeHolder</code> property.
                        </p>
                        <pre><code>var placeHolder = $('#jqxFormattedInput').jqxFormattedInput('placeHolder');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ksf4a9vv/">placeHolder
                                is set to "Enter a number"</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>popupZIndex</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    20000
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the pop-up's z-index.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Set the <code>popupZIndex</code> property.
                        </p>
                        <pre><code>$("#jqxFormattedInput").jqxFormattedInput({ popupZIndex: 999999 });</code></pre>
                        <p>
                            Get the <code>popupZIndex</code> property.
                        </p>
                        <pre><code>var zIndex = $('#jqxFormattedInput').jqxFormattedInput('popupZIndex');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ft65obcf/">popupZIndex
                                is set to 99999</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span35'>radix</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    10
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the radix of the jqxFormattedInput. The radix specifies the numeral
                            system in which to display the widget's value.</p>
                        <h4>
                            Possible values</h4>
                        <p>
                            2 or 'binary' - specifies the binary numeral system. Allowed characters for this
                            numeral system are the digits <em>0</em> and <em>1</em>;</p>
                        <p>
                            8 or 'octal' - specifies the octal numeral system. Allowed characters for this numeral
                            system are the digits from <em>0</em> to <em>7</em>;</p>
                        <p>
                            10 or 'decimal' - specifies the decimal numeral system. Allowed characters for this
                            numeral system are the digits from <em>0</em> to <em>9</em>;</p>
                        <p>
                            16 or 'hexadecimal' - specifies the hexadecimal numeral system. Allowed characters
                            for this numeral system are the digits from <em>0</em> to <em>9</em> and letters
                            from <em>a</em> to <em>f</em> (case insenstive).</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Set the <code>radix</code> property.
                        </p>
                        <pre><code>$("#jqxFormattedInput").jqxFormattedInput({ radix: 'hexadecimal' });</code></pre>
                        <p>
                            Get the <code>radix</code> property.
                        </p>
                        <pre><code>var radix = $('#jqxFormattedInput').jqxFormattedInput('radix'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/p8ym9zgo/">radix
                                is set to "hexadecimal"</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>decimalNotation</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    "default"
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the notation in which to display decimal numbers.</p>
                        <h4>
                            Possible values</h4>
                        <p>
                            'default' - the default representation of decimal numbers, e.g. <em>1590</em>;</p>
                        <p>
                            'exponential' - representation of decimal numbers in scientific exponential notation
                            (E notation), e.g. <em>1.59e+3</em>.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Set the <code>decimalNotation</code> property.
                        </p>
                        <pre><code>$("#jqxFormattedInput").jqxFormattedInput({ decimalNotation: 'exponential' });</code></pre>
                        <p>
                            Get the <code>decimalNotation</code> property.
                        </p>
                        <pre><code>var radix = $('#jqxFormattedInput').jqxFormattedInput('decimalNotation');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m7yyjf87/">decimalNotation
                                is set to "exponential"</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>value</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    '0'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the value of the jqxFormattedInput widget. The value is in the numeral
                            system specified by the <code>radix</code> property.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Set the <code>value</code> property.
                        </p>
                        <pre><code>$("#jqxFormattedInput").jqxFormattedInput({ value: '112' });</code></pre>
                        <p>
                            Get the <code>value</code> property.
                        </p>
                        <pre><code>var value = $('#jqxFormattedInput').jqxFormattedInput('value');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dhgL1zsp/">value
                                is set to "100111101011"</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span36'>min</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    '-9223372036854775808'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the minimum value of the widget. The value of min should be in the
                            same numeral system as <code>value</code>. The min property can be set to no less
                            than '-9223372036854775808' (-2⁶³) in decimal.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Set the <code>min</code> property.
                        </p>
                        <pre><code>$("#jqxFormattedInput").jqxFormattedInput({ min: 'cc' });</code></pre>
                        <p>
                            Get the <code>min</code> property.
                        </p>
                        <pre><code>var min = $('#jqxFormattedInput').jqxFormattedInput('min');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zj7oqnuk/">min
                                is set to "0"</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>max</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    '9223372036854775807'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the maximum value of the widget. The value of max should be in the
                            same numeral system as <code>value</code>. The max property can be set to no more
                            than '9223372036854775807' (2⁶³ - 1) in decimal.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Set the <code>max</code> property.
                        </p>
                        <pre><code>$("#jqxFormattedInput").jqxFormattedInput({ max: "1001" });</code></pre>
                        <p>
                            Get the <code>max</code> property.
                        </p>
                        <pre><code>var max = $("#jqxFormattedInput").jqxFormattedInput('max');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qzugkydz/">max
                                is set to "111110100"</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>spinButtons</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows or hides the spin buttons.
                        </p>
                        <p>
                            <em>Note:</em> the spin buttons require an additional empty <code>div</code> element
                            in the initialization <code>div</code> of jqxFormattedInput.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>spinButtons</code> property.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput({ spinButtons: false });</code></pre>
                        <p>
                            Get the <code>spinButtons</code> property.
                        </p>
                        <pre><code>var spinButtons = $('#jqxFormattedInput').jqxFormattedInput('spinButtons');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3r1zhe7c/">spinButtons
                                is set to false</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span25'>spinButtonsStep</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the increase/decrease step. The value of <code>spinButtonsStep</code>
                            is a decimal number.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>spinButtonsStep</code> property.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput({ spinButtonsStep: 200 });</code></pre>
                        <p>
                            Get the <code>spinButtonsStep</code> property.
                        </p>
                        <pre><code>var spinButtonsStep = $('#jqxFormattedInput').jqxFormattedInput('spinButtonsStep');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/u2j3eekp/">spinButtonsStep
                                is set to 2</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>dropDown</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the jqxFormattedInput's dropdown (pop-up) will be enabled.
                            The dropdown allows the user to choose the radix (numeral system) of the displayed
                            number.
                        </p>
                        <p>
                            <em>Note:</em> the dropdown requires an additional empty <code>div</code> element
                            in the initialization <code>div</code> of jqxFormattedInput.</p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>dropDown</code> property.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput({ dropDown: true });</code></pre>
                        <p>
                            Get the <code>dropDown</code> property.
                        </p>
                        <pre><code>var dropDownWidth = $('#jqxFormattedInput').jqxFormattedInput('dropDown');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vg55ng5f/">dropDown
                                is set to true</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>dropDownWidth</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the width of the jqxFormattedInput's dropdown (pop-up).
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>dropDownWidth</code> property.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput({ dropDownWidth: 200 });</code></pre>
                        <p>
                            Get the <code>dropDownWidth</code> property.
                        </p>
                        <pre><code>var dropDownWidth = $('#jqxFormattedInput').jqxFormattedInput('dropDownWidth');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rg25p17e/">dropDownWidth
                                is set to 200</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>upperCase</span>
                </td>
                <td>
                    <span>boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether to use upper case when the <code>radix</code> property is set
                            to 16 or 'hexadecimal'.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Set the <code>upperCase</code> property.
                        </p>
                        <pre><code>$("#jqxFormattedInput").jqxFormattedInput({ upperCase: true });</code></pre>
                        <p>
                            Get the <code>upperCase</code> property.
                        </p>
                        <pre><code>var upperCase = $("#jqxFormattedInput").jqxFormattedInput('upperCase');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/d6fs2vg6/">upperCase
                                is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>roundedCorners</span>
                </td>
                <td>
                    <span>boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the rounded corners functionality. This property setting has
                            effect in browsers which support CSS border-radius.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Set the <code>roundedCorners</code> property.
                        </p>
                        <pre><code>$("#jqxFormattedInput").jqxFormattedInput({ roundedCorners: false });</code></pre>
                        <p>
                            Get the <code>roundedCorners</code> property.
                        </p>
                        <pre><code>var roundedCorners = $("#jqxFormattedInput").jqxFormattedInput('roundedCorners');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7gnswu2L/">roundedCorners
                                is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>change</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the value is changed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>change</code> event by type: jqxFormattedInput.
                        </p>
                        <pre><code>$("#jqxFormattedInput").on("change", function (event) {
    // event arguments
    var args = event.args;
    // new value
    var value = args.value;
    // old value
    var oldValue = args.oldValue;
    // radix
    var radix = args.radix;
});</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/29fkq3zs/">Bind
                                to the change event by type: jqxFormattedInput.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>radixChange</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the radix is changed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>radixChange</code> event by type: jqxFormattedInput.
                        </p>
                        <pre><code>$("#jqxFormattedInput").on("radixChange", function (event) {
    // event arguments
    var args = event.args;
    // new radix
    var radix = args.radix;
    // old radix
    var oldRadix = args.oldRadix;
    // new value
    var value = args.value;
    // old value
    var oldValue = args.oldValue;
});</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/38e5pkb9/">Bind
                                to the radixChange event by type: jqxFormattedInput.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>open</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the pop-up is opened.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>open</code> event by type: jqxFormattedInput.
                        </p>
                        <pre><code>$('#jqxFormattedInput').on('open', function(){ // type your code here. });
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/snmpyor1/">Bind
                                to the open event by type: jqxFormattedInput.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>close</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the pop-up is closed.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>close</code> event by type: jqxFormattedInput.
                        </p>
                        <pre><code>$('#jqxFormattedInput').on('close', function(){ // type your code here. });
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gcc6keL3/">Bind
                                to the close event by type: jqxFormattedInput.</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>val</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the value.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Get the <code>value</code>:
                        </p>
                        <pre><code>// @param format (optional) - if passed, returns the value in the specified numeral system
(if 'binary', 'octal', 'decimal' or 'hexadecimal' is passed)
or decimal notation (if 'exponential', 'scientific' or 'engineering' is passed).
If no parameter is passed, returns the displayed value of the jqxFormattedInput;

var value = $('#jqxFormattedInput').jqxFormattedInput('val', 'binary');

or

var value = $('#jqxFormattedInput').val();</code></pre>
                        <p>
                            Set the <code>value</code>:
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput('val', 700);

or

$('#jqxFormattedInput').val(700);</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zwgyq720/">sets
                                the jqxFormattedInput value</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>render</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Renders the widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>render</code> method.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput('render');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/55w5avpj/">renders
                                the formatted input</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>refresh</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Refreshes the widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>refresh</code> method.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput('refresh'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dv6rgpza/">refreshes
                                the formatted input</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span68'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Destroys the widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>destroy</code> method.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput('destroy'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kk4cvoq3/">destroys
                                the formatted input</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>open</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Opens the jqxFormattedInput pop-up.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>open</code> method.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput('open'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xe852w1n/">opens
                                the jqxFormattedInput dropdown (pop-up)</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>close</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Closes the jqxFormattedInput pop-up.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>close</code> method.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput('close'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8ju2bbgk/">closes
                                the jqxFormattedInput dropdown (pop-up)</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>focus</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Focuses the widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>focus</code> method.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput('focus'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/dgqLvpux/">focuses
                                the formatted input</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>selectAll</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Selects the text in the input field.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>selectAll</code> method.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput('selectAll'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/quv7q587/">selects
                                the text in the formatted input</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>selectFirst</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Positions the caret in the beginning of the number in the input.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>selectFirst</code> method.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput('selectFirst'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3wjbgu7b/">positions
                                the caret at the beginning of the formatted input</a></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>selectLast</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Positions the caret at the end of the number in the input.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>selectLast</code> method.
                        </p>
                        <pre><code>$('#jqxFormattedInput').jqxFormattedInput('selectLast'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ct0kh1fc/">positions
                                the caret at the end of the formatted input</a></div>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
